<template>
  <div class="energy-page">
    <!--头部4个小盒子  -->
    <div class="header">
      <!-- 1 -->
      <div class="item month">
        <!-- 头部 图片 -->
        <div class="images">
          <img src="@/assets/EnergyPage/riqi.png" alt="">
        </div>
        <div class="top-box">
          <div class="top-box-title">1560</div>
          <div>本月提供客户数</div>
        </div>
      </div>
      <!-- 2 -->
      <div class="item num">
        <!-- 头部 图片 -->
        <div class="images">
          <img src="@/assets/EnergyPage/danweimianji.png" alt="">
        </div>
        <div class="top-box">
          <div class="top-box-title">1560</div>
          <div>本月提供客户数</div>
        </div>
      </div>
      <!-- 3 -->
      <div class="item quota">
        <!-- 头部 图片 -->
        <div class="images">
          <img src="@/assets/EnergyPage/danweimianji.png" alt="">
        </div>
        <div class="top-box">
          <div class="top-box-title">1560</div>
          <div>本月提供客户数</div>
        </div>
      </div>
      <!-- 4 -->
      <div class="item households">
        <!-- 头部 图片 -->
        <div class="images">
          <img src="@/assets/EnergyPage/danweimianji.png" alt="">
        </div>
        <div class="top-box">
          <div class="top-box-title">1560</div>
          <div>本月提供客户数</div>
        </div>
      </div>
      <!-- 5 -->
      <div class="item completion-rate">
        <!-- 头部 图片 -->
        <div class="images">
          <img src="@/assets/EnergyPage/danweimianji.png" alt="">
        </div>
        <div class="top-box">
          <div class="top-box-title">1560</div>
          <div>本月提供客户数</div>
        </div>
      </div>

    </div>
    <!-- 主体 -->
    <div class="main">
      <!-- 左 -->
      <div class="ranking">
        <div class="list">
          <h4 class="text">行业排名TOP5</h4>
          <div v-for="(item,index) in progressList" :key="item.id" class="progress-box">
            <div class="progress-item">
              <div>{{ item.name }}</div>
              <div>
                <span>44%</span>
                <span>{{ item.num }}户</span>
              </div>
            </div>
            <div class="progress-item2">
              <el-progress
                class="app-progress progress-main-blue"
                :class="'progress-top' + index"
                :percentage="item.value"
                :stroke-width="10"
                :show-text="false"
              />
            </div>
          </div>

        </div>
        <div class="user-name">
          <div class="text2">
            <h4>用户类型</h4>
          </div>
          <!-- 1 -->
          <div class="user-box">
            <div class="user-img">
              <div class="user-img0">
                <img src="@/assets/EnergyPage/renjun.png" alt="">
              </div>
              <div class="ordinary">普通用户</div>
            </div>
            <div class="user-num">
              <div>
                <span>用户数</span>
                <span> 255户</span>
              </div>
              <div>
                <span>推送占比</span>
                <span> 89%</span>
              </div>

            </div>

          </div>
          <!-- 2 -->
          <div class="user-box riontower">
            <div class="user-img">
              <div class="user-img0">
                <img src="@/assets/EnergyPage/renjun.png" alt="">
              </div>
              <div class="ordinary">普通用户</div>
            </div>
            <div class="user-num">
              <div>
                <span>用户数</span>
                <span> 255户</span>
              </div>
              <div>
                <span>推送占比</span>
                <span> 89%</span>
              </div>

            </div>

          </div>
        </div>
      </div>
      <div class="map">中</div>
      <div class="statistics">右</div>
    </div>

  </div>
</template>
<script>
export default {
  name: 'EnergyPage',
  data() {
    return {
      progressList: [
        { name: '行业名称1', num: 1233, value: 20, id: '1' },
        { name: '行业名称2', num: 1233, value: 40, id: '2' },
        { name: '行业名称3', num: 1233, value: 60, id: '3' },
        { name: '行业名称4', num: 1233, value: 80, id: '4' },
        { name: '行业名称5', num: 1233, value: 100, id: '5' },
        { name: '行业名称6', num: 1233, value: 90, id: '6' }
      ]
    }
  },
  methods: {
    //   进度条
    format(percentage) {
      return percentage === 100 ? '满' : `${percentage}%`
    }
  }
}
</script>
<style lang="scss" scoped>
.energy-page {
   width: 100%;
//    height: 670px;
  height: calc(100vh - 50px);
   border: 1px solid red;
   padding:0 20px 20px 20px;
   display: flex;
   flex-direction: column;
    // background-color: pink;
    // 头部
    .header {
        width: 100%;
        height: 100px;
        padding: 10px;
        border: 1px solid green;
        display: flex;
        //  justify-content: space-around;
         .item {
             flex: 1;
             margin-right: 10px;
            border-radius: 5px;
             border: 1px solid red;
              display: flex;
            font-size: 16px;
            .images {
                width: 35px;
                height: 35px;
                margin-top: 15px;
                margin-left: 10px;
                    img {
                        width: 100%;
                        height: 100%;
                    }
            }
            .top-box {
                display: flex;
                flex-direction: column;
                margin-left: 10px;
                // justify-content: space-around;
            }
             .top-box>div {
                 flex: 1;
             }
             .top-box-title {
                 margin-top: 13px;
             }
         }

        //  .month {
        //      display: flex;
        //     font-size: 14px;
        //  }
    }
    // 主体
    .main {
        width: 100%;
        height:100%;
        margin-top: 20px;
        border: 1px solid green;
        display: flex;
        // 左
        .ranking {
            flex: 2;
            margin-right: 20px;
              border: 1px solid rgb(14, 33, 207);
              display: flex;
              flex-direction: column;
            //   进度条
              .list {
                  flex: 1;
                   border: 1px solid rgb(216, 136, 16);
                font-size: 14px;
                padding: 10px;
                   .text {
                       width: 100%;
                       height: 30px;
                       text-align: center;
                      margin: 0;
                   }
                   .progress-box {
                       width: 100%;
                    //    height:calc( 100% - 30px);
                       overflow: hidden;
                       .progress-item {
                           display: flex;
                           justify-content: space-between;
                       }
                          [class*='top'] {
                            color: lightgray;
                        }

                   }
              }
                .progress-top0 {
                            color: #fc7c7c;
                        }
                .progress-top1 {
                    color: #c39939;
                }
                .progress-top2 {
                    color: #2ea7b5;
                }
                // 用户类型
              .user-name {
                  flex: 1;
                  margin-top: 20px;
                   border: 1px solid rgb(224, 37, 46);
                   .user-box {
                       width: 225px;
                       height: 85px;
                       display: flex;
                       padding: 15px;
                       text-align: center;
                       border: 1px solid rgb(224, 37, 46);
                       border-radius: 10px;
                       font-size: 14px;
                        margin: 0 auto;
                   }
                   .user-num {
                       margin-left: 10px;
                   }
                   .user-num>div {
                       margin-top: 10px;
                   }
                //    .user-box:nth-child(2) {
                //        margin-top: 10px;
                //    }
                .user-img {
                     .user-img0 {
                       width: 30px;
                       height: 30px;
                       img {
                           width: 100%;
                           height: 100%;
                       }
                   }
                   .ordinary {
                       margin-left: -10px;
                       margin-top: 5px;
                   }

                }

              }
        }
        .riontower {
            margin-top: 10px !important;
        }
            //  中间地图
        .map {
            flex: 4;
              border: 1px solid rgb(11, 192, 20);

        }
        // 图表
        .statistics {
            flex: 2;
            margin-left: 20px;
              border: 1px solid rgb(14, 33, 207);
        }
    }
      .text2 {
            width: 100%;
            height: 30px;
            text-align: center;
            margin: 0;
        }
}
</style>
